본문
hover
원문 링크 
http://api.jquery.com/hover/
함수들
hover( handlerIn(eventObject) , handlerOut(eventObject) )
- .hover( handlerIn(eventObject) , handlerOut(eventObject) )
hover( handlerInOut(eventObject) )
- .hover( handlerInOut(eventObject) )
개요 : 마우스 포인터가 요소들에 올라오거나 떠날때 실행되는 두개의 핸들러를 바인딩합니다.
- .hover( handlerIn(eventObject), handlerOut(eventObject) )
- handlerIn(eventObject) 마우스 포인터가 요소에 들어올 때 실행될 기능
- handlerOut(eventObject) 마우스 포인터가 요소에서 떠날 때 실행될 기능
.hover() 함수는 mouseenter 와 mouseleave 이벤트들을 한번에 바인딩합니다.
$(selector).hover(handlerIn, handlerOut) 을 호출하면 아래와 같은 구문이 실행되는 것입니다.
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
각각 이벤트의 좀 더 자세한 내용을 보시려면 .mouseenter() 와 .mouseleave() 를 참고하세요.
예 제
마우스 오버, 아웃 시 특정기능을 구현해보죠.
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
<script>
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>미리보기
마우스를 올려 보시면 별표 3개가 나타났다 사라졌다 합니다. 아래 두개는 fade 클래스를 가지고 있고 그 클래스를 가진 요소에는 페이드 효과를 주고 있네요. onmouseover와 onmouseout 이벤트를 한방에 처리해 주고 있네요. 간단하고 유용해 보입니다.
예 제
테이블 셀(td)에 특정 클래스를 토글합니다.
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
예 제
바인딩 된 이벤트를 해제하기
$("td").unbind('mouseenter mouseleave');
개요 : 마우스 포인터가 요소들에 올라오거고 떠날때 실행되는 한개의 핸들러를 바인딩합니다.
- .hover( handlerInOut(eventObject) )
- handlerInOut(eventObject) 마우스 포인터가 요소에 들고 날때 실행될 기능
하나의 인자만 전달된 .hover() 함수는 mouseenter 와 mouseleave 이벤트를 실행하게 됩니다. 이런 방법은 핸들러 안에서 jQuery의 다양한 토글 함수들을 사용할 수 있게 하거나 event.type 에 따라 다른 응답을 해줄수 있습니다.
말이 무지 어렵네요. 한마디로 유연하게 상황에 대처할 수 있고 더 다양한 효과를 낼 수 있다는 정도로 의역(?)할 수 있겠네요. ^^;;
$(selector).hover(handlerInOut) 를 호출하면 아래와 같은 구문이 실행되는 겁니다.
$(selector).bind("mouseenter mouseleave", handlerInOut);각각 이벤트의 좀 더 자세한 내용을 보시려면 .mouseenter() 와 .mouseleave() 를 참고하세요.
예 제
마우스를 올리면 LI 가 up 또는 down 되며 슬라이딩 되고 클래스도 토글해요.
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
li.active { background:black;color:white; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>White</li>
<li>Carrots</li>
<li>Orange</li>
<li>Broccoli</li>
<li>Green</li>
</ul>
<script>
$("li")
.filter(":odd")
.hide()
.end()
.filter(":even")
.hover(
function () {
$(this).toggleClass("active")
.next().stop(true, true).slideToggle();
}
);
</script>
</body>
</html>미리보기
인덱스 기준 홀수번째 요소들을 안보이게 숨긴 후 마우스가 올라가면 보여줍니다. 보여줄때 슬라이딩 되면 나타나게 처리했네요.
얼핏 보면 toggleClass()와 비슷해 보이지만 hover() 함수는 마우스 이벤트가 발생했을 때 처리할 수 있다는 것이 차이점이겠네요. 좋고 유용한 함수인 것 같습니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
관련링크
- http://findfun.tistory.com/281 1502회 연결
댓글목록
등록된 댓글이 없습니다.